<template>
    <picker mode="multiSelector" 
            :value="multiIndex" 
            :range="multiArray" 
            @change="handleValueChange"
            @columnchange="handleColumnChange">
        <slot></slot>
    </picker>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import CHINA_REGIONS from './regions.json'

const props = defineProps({
    defaultRegions: {
        type: Array,
        default: () => []
    },
    defaultRegionCode: {
        type: String,
        default: ''
    },
    defaultRegion: {
        type: [String, Array],
        default: null
    }
})

const emit = defineEmits(['getRegion'])

// 响应式数据
const cityArr = ref(CHINA_REGIONS[0].childs)
const districtArr = ref(CHINA_REGIONS[0].childs[0].childs)
const multiIndex = ref([0, 0, 0])
const isInitMultiArray = ref(true)

// 计算属性
const pickedArr = computed(() => {
    // 进行初始化
    if (isInitMultiArray.value) {
        return [
            CHINA_REGIONS,
            CHINA_REGIONS[0].childs,
            CHINA_REGIONS[0].childs[0].childs
        ]
    }
    return [CHINA_REGIONS, cityArr.value, districtArr.value]
})

const multiArray = computed(() => {
    return pickedArr.value.map(arr => arr.map(item => item.name))
})

// 方法
const handleColumnChange = (e) => {
    isInitMultiArray.value = false
    const col = e.detail.column
    const row = e.detail.value
    multiIndex.value[col] = row

    try {
        switch(col) {
            case 0:
                if(CHINA_REGIONS[multiIndex.value[0]].childs.length === 0) {
                    cityArr.value = districtArr.value = [CHINA_REGIONS[multiIndex.value[0]]]
                    break
                }
                cityArr.value = CHINA_REGIONS[multiIndex.value[0]].childs
                districtArr.value = CHINA_REGIONS[multiIndex.value[0]].childs[multiIndex.value[1]].childs
                break
            case 1:
                districtArr.value = CHINA_REGIONS[multiIndex.value[0]].childs[multiIndex.value[1]].childs
                break
            case 2:
                break
        }
    } catch(e) {
        districtArr.value = CHINA_REGIONS[multiIndex.value[0]].childs[0].childs
    }
}

const handleValueChange = (e) => {
    const [index0, index1, index2] = e.detail.value
    const [arr0, arr1, arr2] = pickedArr.value
    const address = [arr0[index0], arr1[index1], arr2[index2]]
    emit('getRegion', address)
}

const handleDefaultRegion = (region) => {
    const isCode = !Array.isArray(region)
    isInitMultiArray.value = false
    let children = CHINA_REGIONS
    
    for(let i = 0; i < 3; i++) {
        for(let j = 0; j < children.length; j++) {
            let condition = isCode 
                ? children[j].code == region.slice(0, (i+1)*2)
                : children[j].name.includes(region[i])
                
            if(condition) {
                children = children[j].childs
                if(i == 0) {
                    cityArr.value = children
                } else if(i == 1) {
                    districtArr.value = children
                }
                multiIndex.value[i] = j
                break
            } else {
                if(i == 0 && j == (children.length-1)) {
                    isInitMultiArray.value = true
                }
            }
        }
    }
}

// 监听属性
watch(() => props.defaultRegion, (region, oldRegion) => {
    if(Array.isArray(region)) {
        oldRegion = oldRegion || []
        if(region.join('') !== oldRegion.join('')) {
            handleDefaultRegion(region)
        }
    } else if(region && region.length == 6) {
        handleDefaultRegion(region)
    } else {
        console.warn('defaultRegion非有效格式')
    }
}, { immediate: true })
</script>
